<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Document</title>
    
</head>
<body>
    <div id="app"></div>
</body>
    <script src="https://unpkg.com/vue@next"></script>
<!--     使用组合API实现侦听器
     1)侦听ref定义的基本类型，需要使用ref函数，例如ref( '张')，立即侦听: immediate:true
     2)侦听多个数据源:
     3)侦听reactive定义的响应式对象类型，需要使用reactive函数， 例如: reactive( {ty
     4)侦听reactive定义的响应式对象中的某个属性，不能直接使用job. name,
     5)侦听reactive定义的响应式对象中的多个属性
     6)特殊情况:侦听reactive定义的对象中的某个属性(对象类型)，
     需要使用deep配置才能侦听到下级属性，deep:true深度侦听 -->
<script>
    const {ref,watch,reactive, watchEffect } = Vue;
        const app = Vue.createApp({
             template:`
                First Name:<input v-model="firstName" /> <br>
                Last Name:<input v-model="lastName" /> <br>
                Full Name:<input v-model="fullName" /> <br>
                岗位:<input v-model="job.name" /> <br>
                薪资:<input v-model="job.type.salary" /> <br>

                `,
            //#region
           /*  data() {
                return {
                    firstNAme: '张',
                    lastNmae: '三',
                    fullName: '张-三'
                }
            },
            
            watch: {
                firstNAme(newVal, oldVal){
                    console.log('当前值： ',newVal,'之前值',oldVal)
                },
                lastName: {
                    handler(newVal,oldVal){
                        console.log('当前值： ',newVal,'之前值',oldVal)
                    },
                    immediate: true 
                
                    
                

            }
        }, */
        setup(props){
            let firstName = ref('张 ');
            let lastName = ref('三 ');
            let fullName = ref(' ');
            let job = reactive({name:'UI设计师',type:{salary:'60k'}})
            
        
        /*侦听单个数据源
        watch(firstName, function(newVal,oldVal){
            console.log('当前值： ',newVal,'之前值',oldVal)
            fullName.value = firstName.value + " " + lastName.value

        })
        watch(lastName, function(newVal,oldVal){
            console.log('当前值： ',newVal,'之前值',oldVal)
            fullName.value = firstName.value + " " + lastName.value

        })
        //侦听多个数据源
        watch([firstName,lastName], function(newVal,oldVal){
            //console.log('当前值： ',newVal,'之前值',oldVal)
            console.log('firstName当前值： ',newVal[0],'之前值',oldVal)
            fullName.value = firstName.value + " " + lastName.value

        })
        watch(firstName, function(newVal,oldVal){
            function([firstNmaeNewVal,lastNameNewVal],[firstNmaeOldVal,lastNameOldVal])
           // console.log('当前值： ',newVal,'之前值',oldVal)
           console.log('firstName当前值： ',firstNameNewVal,'之前值',oldVal) 
           fullName.value = firstName.value + " " + lastName.value

        })
        */
        /* 
        *侦听reactive定义的响应式数据
        *存在问题：
        1、更新之前的值无法获取
        2、当侦听的对象是reactive修饰的类型时
        侦听器默认强制开启deep,配置deep无效
         */
        //watch(job,function(newVal,oldVal){
            // console.log('当前值： ',newVal,'之前值',oldVal)
        //},{immediate: true,deep: false})
        /* 侦听reactive响应式数据当中的某个属性，
        不能使用job.name,需要使用箭头函数
         */
        //watch(() => job.name,function(newVal,oldVal){
        //    console.log('当前值： ',newVal,'之前值',oldVal)
        //})

        /* 侦听reactive响应式数据当中的多个属性，
        不能使用job.name, 需要使用箭头函数*/
        /* watch([() => job.name,() => job.type],function(newVal,oldVal){
                console.log('当前值： ',newVal,'之前值',oldVal)
            },{immediate: true,deep: false})
            return { firstName,lastName,fullName,job} */

            /*
            watch特点：
            1）需要指定监听对象（在第一个参数中指定）
            2）多个参数：第一个参数是监听的对象；第2个参数是回调函数；第3个参数（可选）配置项immediate
            3)...
            4)默认关闭 immediate 立即侦听  
            *watchEffect特点:
          1)不需要指定监听对象
          2)只有一个参数(函数)
          3)它侦听的对象就是在函数当中引用(依赖)的数据;
          4) 默认开启immediate立即侦听 */

            watchEffect(function() {
                console.log(' watchEffect。。。。。')
                fullName.value = firstName.value + lastName.value
            })
            return { firstName,lastName,fullName,job}
    
            }
            })
           const vm = app.mount("#app");
    </script>
</html>